<template>
  <div>
    <main>
      <div class="search">
        <div class="lookover">查看作业批改</div>
        <div class="name">姓名：{{ uName }}</div>

        <el-input
          placeholder="请输入老师名称"
          prefix-icon="el-icon-search"
          v-model="teacherName"
        >
        </el-input>

        <el-date-picker
          v-model="searchDate"
          align="right"
          type="date"
          placeholder="选择日期"
          @change="handleSelectDate"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>

        <el-button
          type="primary"
          class="btn_search"
          icon="el-icon-search"
          @click="searchWorkByDate"
          >搜索</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="resetSearchDate"
          >重置</el-button
        >
      </div>

      <!-- 作业列表 -->
      <div class="work_list">
        <div class="title">已布置作业({{ total }})</div>
        <ul>
          <li v-for="(item, index) in workList" :key="index">
            <span class="timu_num"
              >{{ index > 8 ? index + 1 : "0" + (index + 1) }}.</span
            >
            <span class="list_title">{{ item.title }}</span>
            <span class="tags">
              <el-tag type="danger" class="typecode">{{
                item.typeCode
              }}</el-tag>
              <el-tag class="ttNum" v-if="item.titleNumber">{{
                item.titleNumber
              }}</el-tag>
              <el-tag class="jj" v-if="item.isJt == 1">机经</el-tag>
              <el-tag class="yc" v-if="item.isYc == 1">预测</el-tag>
              <!-- <el-tag class="gp">高频</el-tag> -->
            </span>

            <span class="pub_time">{{ item.createdate | formatTimeHM }}</span>
            <span
              class="exercise_info"
              :class="item.answer ? 'style_submit' : ''"
              @click="toExerciseDetail(item, index + 1)"
              >题目详情
            </span>
            <span class="tName">{{ item.teacherName }}</span>
            <span class="delete_btn" @click="deleteEle(item.id)">删除</span>
          </li>
        </ul>
      </div>

      <h2 v-if="!workList.length">暂无作业~</h2>
      <!-- 分页器 -->
      <!-- <el-pagination
        large
        background
        :page-size="rows"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        @current-change="handleCurrentChange"
      >
      </el-pagination> -->
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      workList: [], // 作业列表
      userId: '',  // 搜索作业列表的学生id
      uName: '',
      searchDate: '', // 搜索作业列表的日期
      total: 0,//总题数
      page: 1,
      rows: 20,
      pages: 0, //总页数
      teacherName: '' // 教师名称
    }
  },
  created () {
    this.userId = this.$route.query.userId
    this.uName = this.$route.query.nickname
    this.getUserWorkList(this.uName, this.userId)
  },
  methods: {
    // 删除题目的方法
    deleteTimu (id) {
      sendPost(api.deleteTimu, {
        id: id
      }).then(res => {
        console.log(res);
        if (res.success == 0) {
          this.$msg({
            type: 'success',
            message: '删除成功!'
          });
        }
      })
    },
    // 删除提示
    deleteEle (id) {
      var that = this
      console.log(id);
      this.$confirm('此操作将删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用执行删除操作的方法：
        that.deleteTimu(id)

      }).catch(() => {
        this.$msg({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    // 按日期或者教师姓名搜索作业
    searchWorkByDate () {
      if (this.searchDate != '' || this.teacherName !== '') {
        sendPost(api.getUserWorkList, {
          page: this.page,
          rows: 20,
          userId: this.userId,
          date: this.searchDate,
          teacherName: this.teacherName
        }).then(res => {
          console.log(res.data);
          this.workList = res.data
          this.total = res.data.length
        })
      } else {
        this.$msg.info('请选择搜索项')
      }
    },
    // 选择搜索日期
    handleSelectDate (e) {
      this.searchDate = e
    },
    getUserWorkList (name, id) {
      if (this.userId != '') {
        sendPost(api.getUserWorkList, {
          // page: this.page,
          // rows: 20,
          userId: id,
          nickname: name,
          date: this.searchDate,
        }).then(res => {
          console.log(res.data);
          this.workList = res.data
          sessionStorage.setItem('workList', JSON.stringify(res.data))
          this.total = res.data.length
        })
      }
    },
    getDate () {
      var date = new Date(Date.now());//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = date.getDate() - 1;
      let h = date.getHours() + ':';
      let m = date.getMinutes() + ':';
      let s = date.getSeconds();
      let newDate = Y + M + D;//时分秒可以根据自己的需求加上
      // console.log(newDate);
      this.searchDate = newDate
      // console.log(this.searchDate);
    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {

    },
    // 查看题目详情
    toExerciseDetail (info, i) {
      this.$router.push('/CheckWork/ExerciseDetail?name=' + this.uName)

      sessionStorage.setItem('index', i)
      sessionStorage.setItem('idx', i > 9 ? i : '0' + i)
      sessionStorage.setItem('detail', JSON.stringify(info))
    },
    // 重置功能
    resetSearchDate () {
      this.page = 1
      this.searchDate = ''
      this.teacherName = ''
      this.getUserWorkList(this.$route.query.nickname, this.$route.query.userId)
    },
    // 取消复选框选择状态
    toggleSelection (rows) {

    }
  }
}
</script>

<style lang="less" scoped>
.timu_num {
  display: inline-block;
  width: 40px;
  text-align: center;
}
.el-input {
  display: inline-block;
  width: 12.5rem;
  margin-right: 1.25rem;
}
.style_submit {
  color: #00cccc;
  border: 1px solid #00cccc !important;
}
main {
  width: 75rem;
  margin: auto;
  /deep/.el-button--primary {
    background-color: #ff5342;
    border-color: #ff5342;
  }
  .search {
    margin-top: 1.875rem;
    height: 4rem;
    line-height: 4rem;
    background-color: #f1f1f1;
    display: flex;
    margin: 1.5rem 0;
    .btn_search {
      margin-left: 1.25rem;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      margin-right: 1.5rem;
      // margin-left: 24.9375rem;
    }
    .el-button {
      margin-top: 0.875rem;
      height: 2.5rem;
    }
    .lookover {
      font-size: 1.25rem;
      font-weight: bold;
      padding: 0 1.25rem;
      color: #333;
    }
    .name {
      font-size: 1.25rem;
      font-weight: bold;
      padding-right: 12.5rem;
      color: #333;
    }
  }
  // 列表
  .work_list {
    border: 1px solid #dedede;
    border-bottom: 0 solid #000;
    // 标题
    .title {
      height: 3.75rem;
      line-height: 3.75rem;
      font-size: 1.25rem;
      text-align: left;
      padding-left: 1.25rem;
      border-bottom: 1px solid #dedede;
    }
    ul {
      li {
        padding: 0 0.8rem;
        text-align: left;
        height: 50px;
        line-height: 3.125rem;
        font-size: 1.25rem;
        border-bottom: 1px solid #dedede;
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;

        .tags {
          display: inline-block;
          margin-left: 2rem;
          width: 22rem;
          .el-tag {
            margin: 0 6px;
            color: #fff;
            border: none;
            font-size: 1rem;
            line-height: 2rem;
          }
          .jj {
            background-color: #ff9b4f;
          }
          .yc {
            background-color: #00cccc;
          }
          .ttNum {
            background-color: #94d0f7;
          }
        }
        .list_title {
          display: inline-block;
          width: 15rem;
          height: 3.125rem;
          line-height: 3.125rem;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .typecode {
          background-color: #aaa;
        }

        .pub_time {
          margin-right: 2rem;
        }
        .exercise_info {
          font-size: 1rem;
          display: inline-block;
          width: 5rem;
          height: 1.875rem;
          line-height: 1.875rem;
          border: 1px solid #333;
          border-radius: 6px;
          text-align: center;
          margin: auto 0;
        }
      }
      li:hover {
        background-color: #f1f1f1;
      }
    }
  }
  // 分页器
  .el-pagination {
    text-align: center;
    margin-top: 6.25rem;
  }
}

.tName {
  // position: absolute;
  right: 0.9375rem;
  text-align: center;
  height: 1.875rem;
  line-height: 1.875rem;
  border: 1px solid #666;
  border-radius: 6px;
  width: 8rem;
  color: #666;
  overflow: hidden;
  margin-left: 0.8rem;
}

.delete_btn {
  display: inline-block;
  background-color: #ff5342;
  color: #fff;
  height: 1.875rem;
  line-height: 1.875rem;
  padding: 0 0.625rem;
  border-radius: 0.5rem;
  margin-left: 0.8rem;
  font-size: 1.125rem;
}
</style>
